<template>
    <div>
        <el-dialog :title="title" :visible="ChangePwdDialogVisible" :before-close="change">
        <el-form class="user-account-key" ref="formAdd" :model="formAdd" :rules="rules" label-width="100px">

            <el-form-item label="新密码" prop="password">
                <el-input type="password" placeholder="请设置新密码" v-model="formAdd.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="qrpassword">
                <el-input type="password" placeholder="请确认新密码" v-model="formAdd.qrpassword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitFormAdd('formAdd')">修改</el-button>
                <el-button @click="$refs['formAdd'].resetFields()">重置</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import {AjaxByAll} from '@/api/api'

    export default {
        name:"userChangePwd",
        data() {

            //此处即表单发送之前验证  验证新密码与再次确认
            let validateNewPassword2 = (rule, value, callback) => {
                if (value !== this.formAdd.password) {
                    callback(new Error('与新密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                ChangePwdDialogVisible: this.DialogVisible,
                formAdd: {

                    password: '',
                    qrpassword: ''
                },
                rules: {

                    password: [{
                        required: true,
                        message: '请设置新密码',
                        trigger: 'blur'
                    }
                    ],
                    qrpassword: [{
                        required: true,
                        message: '请确认新密码',
                        trigger: 'blur'
                    },
                        {
                            validator: validateNewPassword2,
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            change() {
                this.ChangePwdDialogVisible = !this.ChangePwdDialogVisible;

            },
            submitFormAdd(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let form = {
                            id: this.userId,
                            password: this.formAdd.password
                        }
                        let urls = 'sys/org/user/updatePwd';
                        if(this.changePwdUrl!=null){
                            urls=this.changePwdUrl;

                        }
                        let method = 'post';
                        AjaxByAll(method, urls, form).then(data => {
                            if (data.code === 200) {

                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });


                            } else {
                                this.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }

                        });


                    } else {
                        this.$message({
                            message: '校验失败',
                            type: 'error'
                        });
                    }
                });
            },


        },
        watch: {},
        mounted: function () {
            
        },
        props: {

            userId: String,
            DialogVisible: Boolean,
            changePwdUrl:String
        }
    }
</script>

<style>


    .user-account-key {
        width: 88%;
    }

</style>
